<template>
  <div class="two">
    <div class="movieimgBox">
      <div class="msk"></div>
      <div class="msk-bg" :style='myimg'></div>
      <div class="movieimg">
        <div class="movieimgL">
          <img :src="movieObj.img" />
        </div>
        <div class="movieimgR">
          <div class="title">
            {{ movieObj.nm }}
          </div>
          <div class="etitle">
            {{ movieObj.enm }}
          </div>
          <div class="sc">
            {{ movieObj.sc | scif }}
          </div>
          <div class="type">
            {{ movieObj.cat }}
          </div>
          <div class="public">
            {{ movieObj.nm }}
          </div>
          <div class="public">{{ movieObj.src }}/{{ movieObj.episodeDur }}</div>
        </div>
      </div>
    </div>
    <div class="movieDay">
      <div class="movieDayTime">
        <ul>
          <li :class="setRed(index)" v-for="(item, index) in moreDay" :key="item.date" @click="addsrc((item.date),index)">
            {{ item.date | dayday(index) }}
          </li>
        </ul>
      </div>
			<div class="movieDaysrc">
				<div class="movieDaysrcBox" v-for="item2 in srcList" :key="item2.nm">
					<div class="movieDaysrcBox-one">
						<div class="movieDaysrcBox-one-L">
							{{item2.nm}}
						</div>
						<div class="movieDaysrcBox-one-R">
							<span>{{item2.sellPrice}}</span>元起
						</div>
					</div>
					<div class="movieDaysrcBox-two">
						{{item2.addr}}
					</div>
					<div class="movieDaysrcBox-three">
						<div v-for="(small,index2) in item2.labels" :key="small.name" :class="small.color|setclass">
							{{small.name}}
						</div>
					</div>
					<div class="movieDaysrcBox-four" v-if="item2.promotion.cardPromotionTag!=''">
						<div></div>
						<span>{{item2.promotion.cardPromotionTag}}</span>
					</div>
					<div class="movieDaysrcBox-five">
						近期场次: {{item2.showTimes}}
					</div>
				</div>
			</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "itemBody",
  props: ["movieObj","myimg"],
  data() {
    return {
      moreDay: [],
      srcList: [],
			indexof:0,
    };
  },
  mounted() {
    let id = this.$route.params.id;
    axios({
      method: "get",
      url: `/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=${id}&channelId=4&cityId=70`,
    }).then((res) => {
      this.moreDay = res["data"]["data"]["dates"];
      let date = this.moreDay[0].date;
      axios({
        method: "get",
        url:
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId="+id+"&serviceId=-1&stationId=-1&showDate="+date+"&cityId=70&ci=70",
      }).then((res) => {
				this.srcList = res["data"]["data"]["cinemas"]
      });
    });
  },
  filters: {
    scif: function (value) {
      if (value === 0) {
        return "暂无评分";
      } else {
        return value;
      }
    },
    dayday: function (value, index) {
      var arr = value.split("-");
      var str = "";
      var jintian = ["今天", "明天", "后天"];
      if (index < 3) {
        str += jintian[index];
      } else {
        str += `周${"日一二三四五六".charAt(new Date(value).getDay())}`;
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
		setclass:function(value){
			return "c"+value.split("#")[1]
		}
  },
  methods: {
			setRed:function(index){
			if(index === this.indexof){
				return {selected:true}
			}
		},
    addsrc: function (value,index) {
			this.indexof = index
			let id = this.movieObj.id
			let date = value
			axios({
        method: "get",
        url:
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId="+id+"&serviceId=-1&stationId=-1&showDate="+date+"&cityId=70&ci=70"
      }).then((res) => {
        this.srcList = res["data"]["data"]["cinemas"]
      });
		},
  },
};
</script>

<style>
.selected{
	color: #f03d37;
	border-bottom: 2px solid #f03d37;
}

.movieimgBox {
	overflow: hidden;
  position: relative;
  width: 10rem;
  height: 5.013333rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.msk {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.msk-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.movieimg {
  width: 8.8rem;
  height: 4rem;
  z-index: 0;
  display: flex;
}

.movieimgL {
  width: 2.933333rem;
  height: 4rem;
}

.movieimgL img {
  width: 100%;
  height: 100%;
}

.movieimgR {
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 0.533333rem;
}

.title {
  color: white;
  font-size: 20px;
  overflow: hidden;
}

.etitle {
  color: white;
  font-size: 12px;
  opacity: 0.8;
}

.sc {
  font-size: 18px;
  color: #fc0;
}

.type {
  color: white;
  font-size: 12px;
  opacity: 0.8;
}

.public {
  opacity: 0.8;
  color: white;
  font-size: 12px;
}

.movieDay{
	background: white;
}

.movieDayTime {
  width: 10rem;
  overflow: scroll;
	margin-bottom: .533333rem;
}

.movieDayTime ul {
  display: flex;
  justify-content: space-around;
  width: 26.666667rem;
  overflow: hidden;
	border-bottom: 1px solid #ccc;
}

.movieDayTime ul li {
  width: 3.066667rem;
  height: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.movieDaysrc{
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.movieDaysrcBox{
	width: 9.6rem;
	margin-bottom: .533333rem;
	border-bottom: 1px solid #ccc;
}

.movieDaysrcBox-one{
	display:flex;
	justify-content: space-between;
	margin-bottom: .266667rem;
}

.movieDaysrcBox-one-L{
	font-size: 16px;
}

.movieDaysrcBox-one-R{
	font-size: 12px;
	color: #f03d37;
}

.movieDaysrcBox-one-R span{
	font-size: 18px;
}

.movieDaysrcBox-two{
	margin-bottom: .133333rem;
	font-size: 13px;
	color:#666;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.movieDaysrcBox-three{
	display: flex;
	width: 100%;
	margin-bottom: .133333rem;
}

.movieDaysrcBox-three div{
	margin-right: .133333rem;
}

.c579daf{
	color: #579daf;
	border: 1px solid #579daf;
	padding: 0 1px;
}

.cff9900{
	color: #ff9900;
	border: 1px solid #ff9900;
	padding: 0 1px;
}

.movieDaysrcBox-four{
	width: 100%;
	display: flex;
	margin-bottom: .133333rem;
}

.movieDaysrcBox-four div{
	width: .4rem;
	height: .373333rem;
	background: url();
	background-size: 100% 100%;
}

.movieDaysrcBox-four span{
	font-size: 12px;
	transform: scale(0.91);
	color: #999;
}

.movieDaysrcBox-five{
	color: #777;
	margin-bottom: .133333rem;
}
</style>